<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>澳門離線商品簽收</title>
    <link rel="stylesheet" href="./libs/element-ui/index.css"/>
    <link rel="stylesheet" href="./css/element-user.css"/>
    <link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<div id="app"
     v-loading="loading"
     element-loading-text="加載中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.8)">
    <div style="margin-left: 20px;overflow: hidden">
        <el-form ref="queryForm" :inline="true" label-width="68px" style="margin-top: 20px;">
            <el-form-item
                    v-if="commodityTypeList.length"
                    label="商品類別"
                    prop="paramsStr.actIds"
            >
                <el-cascader
                        expand-trigger="hover"
                        :options="
            commodityTypesTree.filter(
              (t) => t.children && t.children.length > 0
            )
          "
                        clearable
                        v-model="queryParams.actId"
                        placeholder="請選擇商品類別"
                        :props="{ label: 'actNameZh', value: 'actId', emitPath: false }"
                        collapse-tags
                />
            </el-form-item>
            <el-form-item v-if="commodityList.length" label="商品名称">
                <el-select
                        v-model="queryParams.acId"
                        filterable
                        placeholder="請選擇商品"
                >
                    <el-option
                            v-for="item in commodityList.filter(
              (c) => c.actId === queryParams.actId
            )"
                            :key="item.acId"
                            :label="item.acNameZh"
                            :value="item.acId"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="囚犯編號">
                <el-input
                        v-model="queryParams.dtStaffNo"
                        placeholder="請輸入囚犯編號"
                        clearable
                />
            </el-form-item>

            <el-form-item label="座">
                <el-select v-model="queryParams.blcId" placeholder="請選擇座" clearable>
                    <el-option
                            :key="item.blcId"
                            v-for="item in balconies"
                            :label="item.blcName"
                            :value="item.blcId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="樓">
                <el-select v-model="queryParams.fId" placeholder="請選擇樓" clearable>
                    <el-option
                            :key="item.fId"
                            v-for="item in queryParams.blcId
              ? floors.filter((f) => f.blcId === queryParams.blcId)
              : []"
                            :label="item.fName"
                            :value="item.fId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="囚倉" label-width="50px">
                <el-select
                        v-model="queryParams.stoId"
                        placeholder="請選擇囚倉"
                        clearable
                >
                    <el-option
                            :key="item.stoId"
                            v-for="item in queryParams.fId
              ? storages.filter((s) => s.fId === queryParams.fId)
              : []"
                            :label="item.stoName"
                            :value="item.stoId"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="簽收狀態" label-width="80px">
                <el-select
                        v-model="queryParams.csState"
                        placeholder="請選擇簽收狀態"
                        clearable
                >
                    <el-option :value="0" label="未簽收"></el-option>
                    <el-option :value="1" label="已簽收"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label-width="0">
                <el-button icon="el-icon-refresh" size="mini" @click="getList">刷新數據</el-button>
            </el-form-item>

            <el-form-item label-width="0">
                <el-button
                        v-if="queryParams.acId"
                        :disabled="!selectRows.length"
                        icon="el-icon-goods"
                        type="primary"
                        size="mini"
                        @click="signSelection"
                >一鍵簽收所選囚犯的指定商品
                </el-button>
            </el-form-item>

            <el-form-item label-width="0">
                <el-button
                        icon="el-icon-document-add"
                        type="primary"
                        size="mini"
                        @click="restartDevice"
                >重新錄入指紋
                </el-button>
            </el-form-item>

            <el-form-item label-width="0">
                <el-button
                        icon="el-icon-document-add"
                        type="primary"
                        size="mini"
                        @click="fingerprintRecognizeTest"
                >指紋識別測試
                </el-button>
            </el-form-item>

            <el-form-item label-width="0">
                <span style="color: #409EFF;font-weight: bold">用戶 {{userInfo.couNickname}}已登錄，</span><el-button type="text" @click="logout">登出</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="table-container">
        <el-table
                border
                v-loading="loading"
                :data="commoditySignGroupListFilter"
                @row-dblclick="showSignGroupDtl"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" :selectable="row => row.csState === 0"></el-table-column>
            <el-table-column label="囚犯姓名" align="center" prop="dtName"></el-table-column>
            <el-table-column label="囚犯編號" align="center" prop="dtStaffNo"></el-table-column>
            <el-table-column
                    label="囚倉資料"
                    align="center"
                    prop="dtDtoNo"
                    :formatter="getDtoName"
            ></el-table-column>
            <el-table-column
                    v-if="queryParams.acId"
                    label="商品名稱"
                    align="center"
                    prop="acName"
            ></el-table-column>
            <el-table-column
                    v-if="queryParams.acId"
                    label="下單數量"
                    align="center"
                    prop="codCountAffirm"
            ></el-table-column>
            <el-table-column label="囚犯編號" align="center" prop="dtStaffNo"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            @click="showSignGroupDtl(scope.row)"
                    >查看配貨中的訂單
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div style="margin:20px 0 0 20px;">
        <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
        ></pagination>
    </div>

    <!-- 查看商品签收组详情对话框 -->
    <el-dialog
            title="訂單記錄"
            v-loading="loading"
            :visible.sync="openOrderMainList"
            width="1200px"
            append-to-body
            @closed="orderMainList = []"
    >
        <el-table v-loading="loading" :data="orderMainList" @row-dblclick="showDtl">
            <el-table-column label="下單時間" align="center" prop="createTime"></el-table-column>
            <el-table-column label="囚犯編號" align="center" prop="dtStaffNo"></el-table-column>
            <el-table-column label="囚犯姓名" align="center" prop="dtName"></el-table-column>
            <el-table-column label="訂單編號" align="center" prop="comNo"></el-table-column>
            <el-table-column
                    label="訂單金額（MOP）"
                    align="center"
                    prop="orderTotal"
            ></el-table-column>
            <el-table-column
                    label="訂單狀態"
                    align="center"
                    prop="comState"
                    :formatter="comStateFormat"
            ></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            @click="showDtl(scope.row)"
                    >查看詳情
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog
            title="訂單詳情"
            v-loading="loading"
            :visible.sync="openDtl"
            top="20px"
            width="1080px"
            append-to-body
            @close="openOrderMainList = false"
            @closed="orderDtls = []"
    >
        <el-table ref="signTable" v-loading="loading" :data="orderDtls" height="550" @selection-change="changeSelection" :row-style="rowStyleFunction">
            <el-table-column type="selection" width="55" :selectable="canSelect"></el-table-column>
            <el-table-column label="名稱" align="center" prop="acName"></el-table-column>
            <el-table-column label="數量" align="center" width="140">
                <template slot-scope="scope">
                    <div style="width: 100px">
                        <el-input-number :disabled="scope.row.csState !== 0 || scope.row.csDeleteState !== 0" size="small" v-model="scope.row.csSignCount" :min="1" :max="scope.row.csOrderCount"></el-input-number>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="金額（MOP）" align="center"
                             width="120">
                <template slot-scope="scope">
                    MOP$ {{ parseFloat((scope.row.csSignCount * scope.row.codPriceAffirm).toPrecision(12)) }}
                </template>
            </el-table-column>
            <el-table-column label="狀態" align="center" width="220">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.csSupplyState">補貨</el-tag>
                    <el-tag v-if="scope.row.csDeleteState" type="danger">已刪除</el-tag>
                    <el-tag v-if="scope.row.csState === 0" type="info">{{
                        csStateFormat(scope.row)
                        }}
                    </el-tag>
                    <el-tag v-if="scope.row.csState === 1" type="success">{{
                        csStateFormat(scope.row)
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="下單數量" align="center" prop="csOrderCount"></el-table-column>
            <el-table-column label="簽收數量" align="center" prop="csSignCount"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="420px">
                <template slot-scope="scope">
                    <el-button
                            v-if="scope.row.csState === 0 &&scope.row.csDeleteState === 0"
                            size="mini"
                            icon="el-icon-goods"
                            type="primary"
                            @click="sign(scope.row,1)"
                    >指紋驗證簽收</el-button>
                    <el-button
                            v-if="scope.row.csState === 0 &&scope.row.csDeleteState === 0"
                            size="mini"
                            icon="el-icon-goods"
                            type="primary"
                            @click="sign(scope.row,2)"
                    >工作號驗證簽收</el-button>
<!--                    <el-button-->
<!--                            v-if="scope.row.csState === 0 &&scope.row.csDeleteState === 0"-->
<!--                            size="mini"-->
<!--                            icon="el-icon-goods"-->
<!--                            type="primary"-->
<!--                            @click="sign(scope.row,3)"-->
<!--                    >無驗證簽收</el-button>-->
                    <el-button
                            v-if="scope.row.csState === 1 &&scope.row.csDeleteState === 0"
                            size="mini"
                            icon="el-icon-edit"
                            type="warning"
                            @click="editSignCount(scope.row)"
                    >修改簽收數量</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-form :inline="true">
                <el-form-item label="囚犯編號：" label-width="120px">
                    {{orderChoose.dtStaffNo}}
                </el-form-item>
                <el-form-item label="囚犯姓名：" label-width="120px">
                    {{orderChoose.dtName}}
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="!selection.length" icon="el-icon-goods" type="primary" @click="signAll(1)">一鍵簽收（指紋驗證）</el-button>
                    <el-button :disabled="!selection.length" icon="el-icon-goods" type="primary" @click="signAll(2)">一鍵簽收（工作號驗證）</el-button>
<!--                    <el-button :disabled="!selection.length" icon="el-icon-goods" type="primary" @click="signAll(3)">一鍵簽收（無驗證）</el-button>-->
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>
</div>
</body>
<script src="./js/common.js"></script>
<script src="./libs/vue/vue.js"></script>
<script src="./libs/element-ui/index.js"></script>
<script src="./components/Pagination.js"></script>
<script src="./libs/axios/axios.min.js"></script>
<script src="./js/request.js"></script>
<script src="js/api/loginApi.js"></script>
<script src="js/api/commodityApi.js"></script>
<script src="js/api/fingerApi.js"></script>
<script src="./js/index.js"></script>
</html>
